<template>
    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-gift"></i>场次查询</div>
            <div class="tools">
                <a href="javascript:;" class="collapse" data-original-title="" title=""></a>
            </div>
        </div>
        <div class="portlet-body form">
            <!-- BEGIN FORM-->
            <form action="#" class="form-horizontal">
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">场次类型</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.SessionTypes" clearable placeholder="请选择比赛场次类型条件" style="width:100%">
                                        <el-option v-for="(text, code) of words.types" :key="code" :label="text" :value="code"></el-option>
                                    </el-select>
                                </div>
                            </div> 
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">比赛日期</label>
                                <div class="col-md-9">
                                    <el-date-picker v-model="condition.SessionTime0" style="width: 100%;" type="date" placeholder="选择日期"></el-date-picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">比赛项目</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.Events" multiple clearable placeholder="请选择比赛项目条件" style="width:100%">
                                        <el-option v-for="(word, index) of words.events" :key="index" :label="word" :value="index"></el-option>
                                    </el-select>                                    
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">比赛组别</label>
                                <div class="col-md-9">
                                    <el-select v-model="condition.Groups" multiple clearable placeholder="请选择比赛项目条件" style="width:100%">
                                        <el-option v-for="(word, index) of words.groups" :key="index" :label="word" :value="index"></el-option>
                                    </el-select>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12 pull-right">
                            <div style="float:right;">
                                <button type="button" class="btn green" @click="exportJuries()">导出评委工作安排</button>
                                <button type="button" class="btn green" @click="query()">查询场次</button>
                                <button type="button" class="btn default" @click="clear()">清空条件</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- END FORM-->
        </div>
    </div>
</template>

<script>

import moment from 'moment/src/moment.js';

export default {
    props: {
        'data': {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            condition: { },
            words: {
                events: {},
                groups: {},
                types: {
                   'PRELIMINARY': '初赛',
                   'REMATCH': '复赛',
                   'FINALS': '决赛'
                }
            }
        }
    },
    watch: {
        'data': {
            handler: function(value){
                this.condition = value;
            },
            deep: true
        },
    },
    mounted() {
        // 加载词语
        this.$DataService.GetWordDictByCode('COMPETE_GROUP')
            .then(ret => {
                this.words.groups = ret;
            });
        this.$DataService.GetWordDictByCode('SOLO_COMPETE_EVENT')
            .then(ret => {
                let events = ret;
                this.$DataService.GetWordDictByCode('ENSEMBLE_COMPETE_EVENT')
                    .then(ret => {
                        for(var k in ret) { events[k] = ret[k]; }
                        this.words.events = events;                        
                    });                
            });
        
        // 执行查询
        this.query();
    },
    methods: {
        query() {
            let _condition = Object.assign({}, this.condition);
            if (_condition.SessionTypes)
                _condition.SessionTypes = [_condition.SessionTypes];
            if (_condition.SessionTime0)
                _condition.SessionTime1 = moment(_condition.SessionTime0).add(1, 'days').format('L');
            this.$emit('getSessionCondition', _condition);
        }, 

        clear() {
            this.condition = {
                Groups: [],
                Events: [],
                SessionTime0: null,
                SessionTypes: []
            };      
        },

        exportJuries() {
            this.$SessionService.ExportJuries();
        },
    }
}
</script>

<style>

</style>
